<div style="margin-top: 10px;">

    <form class="form-inline">
        <div class="form-group pull-left">
            <h4 class="text-muted" style="padding-left: 10px;">操作员管理</h4>
        </div>

        <div class="form-group pull-right" style="margin-right: 50px;">
            <label class="sr-only" for="exampleInputEmail">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail" placeholder="输入要删除的用户名">
            <button class="btn-sm btn-primary" id="btn-delbyusername">删除</button>
        </div>
    </form>


    <div class="col-lg-12 col-md-12 col-sm-12">
        <table class="table table-hover table-responsive table-striped table-condensed" >
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名称</th>
                <th>用户密码</th>
                <th>用户操作</th>
            </tr>
            </thead>
            <tbody id="tbodyId">
            </tbody>
        </table>
        <div id="pageId" class="pull-right">
        </div>
</div>
</div>
<script type="application/javascript">
    $(function () {
        $("#pageId").load("/doPageUI",function(){
            doGetObjects();
        });
        function doGetObjects(){
            // debugger
            //1.params
            //获取在Page.html中绑定的当前页码值
            var pageCurrent=$("#pageId").data("pageCurrent");
            //假如没有值,设置初始值为1
            if(!pageCurrent)pageCurrent=1;
            //var params="pageCurrrent="+pageCurrent;
            var params={"pageCurrent":pageCurrent};
            //获取查询时用户输入的名字
            var name=$("#searchNameId").val();
            if(name)params.name=name;
            //2.url
            var url="role/doFindPageObjects";
            //3.ajax request
            console.log(params);
           /* $.getJSON(url,params,function(result){
                // console.log(result);
                doHandleResponseResult(result);
            });*/
        }
        function doHandleResponseResult(result){
            console.log(result.status);
            if(result.status==1){
                console.log(result.data.records);
                doSetTableBodyRows(result.data.records);
                // doSetPagination(result.data);//page.html
            }else{
                doSetTableBodyErrors(result.message);
            }
        }
        function doSetTableBodyErrors(message){
            //获取body对象并清空
            var tBody=$("#tbodyId");
            tBody.empty();
            //创建tr对象
            var tr=$("<tr></tr>");
            //创建td对象
            //var len=$("table thead").find("tr").find("th").length;
            var len=$("table th").length;
            var td=$("<td></td>");
            td.prop("colspan",len);
            td.append(message);
            tr.append(td);
            //将tr追加到tbody
            tBody.append(tr);
        }
        function doSetTableBodyRows(records){
            console.log(records);
            //获取tbody对象,并清空
            var tBody=$("#tbodyId");
            tBody.empty();
            //2.迭代数据,并追加到tBody
            for(var i in records){
                //2.1构建tr对象
                var tr=$("<tr></tr>");
                tr.data("id",records[i].id);
                //2.2构建tds对象
                console.log("data"+tr.data("id"))
                console.log(records[i]);
                var tds=doCreateTds(records[i],i);
                console.log(tds);
                //2.3将tds对象追加到tr中
                tr.append(tds);
                //2.4将tr追加到tbody中
                tBody.append(tr);
            }
        }
        function doCreateTds(row,i){
            var tds=
                `<td>${(parseInt(i)+1)}</td>
               <td>${row.name}</td>
               <td>${row.note}</td>
               <td><button class=btn-danger><a class=btn-delete style="color: white" href="javascript:void(0)">删除</a></button>`;
                        return tds;
        }
    })
</script>